/**
 * Created by hejg on 2018/5/21.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native';
import {observer} from 'mobx-react/native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Indicator from '../../../components/Indicator';
import DropDown from '../../../components/DropDown';
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
@observer
export default class RankedPart extends Component {
    componentDidMount() {
        let part = this.props.store;
        if (part.indexOptions.length < 1) {
            part.showIndicator();
            this._loadIndexCollect();
        }
    }

    _loadIndexCollect() {
        let _this = this;
        let part = this.props.store;
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getIndexTreeInfo', '', function (data) {
            if (data.state) {
                part.setIndexOptions(data.info);
                if (data.info && data.info.length > 0) {
                    part.setParams(Object.assign({}, part.params, {indexCode: data.info[0].indexCode}));
                    if (data.info[0].child && data.info[0].child.length > 0) {
                        part.setParams(Object.assign({}, part.params, {childCode: data.info[0].child[0].indexCode}));
                        _this._loadScreenData();
                    } else {
                        part.hiddenIndicator();
                    }
                }
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {

        });
    }

    _loadScreenData() {
        let _this = this;
        let part = this.props.store;
        var qr_params = "indexCode=" + part.params.indexCode
            + "&childCode=" + part.params.childCode + "&opTime=" + part.params.opTime;
        // console.warn(qr_params);
        part.showIndicator();
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getIndexTreeDetail', qr_params, function (data) {
            if (data.state) {
                part.setScreenData(data.info.info);
                part.setPeriodOptions(data.info.period);
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {
            part.hiddenIndicator();
        });
    }

    _changePeriodItem(index) {
        let part = this.props.store;
        part.setSelectPeriod(index);
        part.setParams(Object.assign({}, part.params, {opTime: part.periodOptions[index].value}));
        this._loadScreenData();
    }

    _changeIndexItem(index) {
        let part = this.props.store;
        part.setSelectIndex([index, 0]);
        part.setSelectPeriod(0);
        part.setParams(Object.assign({}, part.params, {opTime: '', indexCode: part.indexOptions[index].indexCode}));
        if (part.indexOptions[index].child && part.indexOptions[index].child.length > 0) {
            part.setParams(Object.assign({}, part.params, {childCode: part.indexOptions[index].child[0].indexCode}));
            this._loadScreenData();
        } else {
            part.setScreenData([]);
            part.setPeriodOptions([]);
            part.setParams(Object.assign({}, part.params, {childCode: ''}));
        }
    }

    _changeChildItem(index) {
        let part = this.props.store;
        part.setSelectIndex([part.selectIndex[0], index]);
        part.setParams(Object.assign({}, part.params, {childCode: part.indexOptions[part.selectIndex[0]].child[index].indexCode}));
        this._loadScreenData();
    }

    render() {
        let part = this.props.store;
        return (
            <View style={{flex:1}}>
                <ScrollView>
                    <View>

                        <ListView title={part.selectIndexTitle} part={part}/>

                       {/* <View style={styles.RankedTabView}>
                            {
                                part.indexOptions && part.indexOptions.length > 0 ?
                                    part.indexOptions[part.selectIndex[0]].child.map((item, index) => (
                                        <TouchableOpacity key={`RankedTabItem_${item.indexCode}`}
                                                          onPress={() => this._changeChildItem(index)}>
                                            <Text style={[styles.RankedTabItem,{
                                                                color: part.selectIndex[1] === index ? Style.color.blue : Style.color.black,
                                                                borderColor:part.selectIndex[1] === index ? Style.color.blue : Style.color.white}]}>
                                                {item.indexName}
                                            </Text>
                                        </TouchableOpacity>
                                    ))
                                    :
                                    null
                            }
                        </View>*/}

                    </View>
                </ScrollView>
                <Indicator isVisible={part.indicatorVisible} message={part.indicatorMessage}/>
            </View>
        );
    }
}
class ListView extends Component{
    constructor(props){
        super(props);
        this.state={
            visiable:false
        }
    }
    _change(visible){
        this.setState({
           visiable: visible == true?false:true
        });
    }
    render(){
        let part = this.props.part;
        return(
            <View>
                <View style={styles.TopConditionView}>
                    <View style={styles.ConditionIndexView}>
                        <Text style={styles.ConditionIndexTitle}>{this.props.title}</Text>
                    </View>
                    <TouchableOpacity
                        style={{paddingRight:20}}
                        onPress={()=> this._change(this.state.visiable)}>
                        <ChoseIcon name={'angle-down'} size={20} color={Style.color.gray}/>
                    </TouchableOpacity>
                </View>
                {
                    this.state.visiable == true?
                        <View>
                            <View style={styles.RankedTabView}>
                                {
                                    part.indexOptions && part.indexOptions.length > 0 ?
                                        part.indexOptions[part.selectIndex[0]].child.map((item, index) => (
                                            <TouchableOpacity key={`RankedTabItem_${item.indexCode}`}
                                                              onPress={() => this._changeChildItem(index)}>
                                                <Text style={[styles.RankedTabItem,{
                                                    color: part.selectIndex[1] === index ? Style.color.blue : Style.color.heightGray,
                                                    borderColor:part.selectIndex[1] === index ? Style.color.blue : 'transparent'}]}>
                                                    {item.indexName}
                                                </Text>
                                            </TouchableOpacity>
                                        ))
                                        :
                                        null
                                }
                            </View>
                            <RankedHeader/>
                            {
                                part.screenData.map((item, index) => (
                                    <RankedItem item={item} index={index} key={`RankedItem_${item.orgId}`}/>
                                ))
                            }
                        </View>
                        :
                        null
                }
            </View>
        )
    }
}
class RankedHeader extends Component {
    render() {
        return (
            <View style={styles.RankedHeaderView}>
                <View style={{width:'30%',paddingLeft:20}}>
                    <Text style={styles.RankedHeaderTH}>排名</Text>
                </View>
                <View style={{width:'50%'}}>
                    <Text style={styles.RankedHeaderTH}>地市</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.RankedHeaderTH}>指标值</Text>
                </View>
               {/* <View style={{width:'20%'}}>
                    <Text style={styles.RankedHeaderTH}>完成率</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.RankedHeaderTH}>排名变化</Text>
                </View>*/}
            </View>
        );
    }
}

class RankedItem extends Component {
    render() {
        const color = [Style.color.red, Style.color.yellow, Style.color.green]
        let item = this.props.item;
        return (
            <TouchableHighlight onPress={()=>{}}
                                underlayColor={Style.color.lightGray}
                                style={{backgroundColor:this.props.index%2==0?Style.color.white:Style.color.heightGray}}>
                <View style={styles.RankedItemView}>
                    <View style={{width:'30%',paddingLeft:20}}>
                        <Text
                            style={[styles.RankedItemTD,{color:Style.color.gray, fontWeight:'bold'}]}>
                           {item.order}
                        </Text>
                    </View>
                    <View style={{width:'50%'}}>
                        <Text style={{fontSize:Style.color.small}}>{item.orgName}</Text>
                    </View>
                    <View style={{width:'20%'}}>
                        <Text style={[styles.RankedItemTD,{color:Style.color.lightRed}]}>{Tool.numberFormat(item.monthlyIncome, 2)}</Text>
                    </View>
                    {/*<View style={{width:'20%'}}>
                        <Text style={styles.RankedItemTD}>{Tool.numberFormat(item.revenueShare * 100, 2)}%</Text>
                    </View>*/}
                    {/*<View style={{width:'20%',alignItems:'flex-start',justifyContent:'center'}}>
                        <View
                            style={[styles.RankedItemChange,{backgroundColor: item.orderChange > 0 ? Style.color.green:Style.color.red}]}>
                            <MaterialIcon name={item.orderChange > 0 ? 'arrow-upward' : 'arrow-downward'}
                                          size={14}
                                          color={Style.color.white}/>
                            <Text style={[styles.RankedItemTD,{color:Style.color.white,fontSize:Style.fontSize.small}]}>
                                {item.orderChange}
                            </Text>
                        </View>
                    </View>*/}
                </View>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Style.color.screen
    },
    TopConditionView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 10,
        height:Style.css.listHeight,
        backgroundColor: Style.color.white
    },
    ConditionIndexView: {
        flex: 1,
    },
    ConditionIndexTitle: {
        fontSize: Style.fontSize.normal,color:Style.color.black
    },
    RankedTabView: {
        backgroundColor: Style.color.screen, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center'
    },
    RankedTabItem: {
        fontSize: Style.fontSize.normal, borderBottomWidth: 2, paddingVertical: 10
    },
    RankedHeaderView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 5,
        paddingHorizontal: 5,
        backgroundColor: Style.color.heightGray,
    },
    RankedHeaderTH: {
        fontSize: Style.fontSize.normal, color: Style.color.gray
    },
    RankedItemView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 5,
        paddingHorizontal: 5,
    },
    RankedItemTD: {
        fontSize: Style.fontSize.normal, color: Style.color.gray
    },
    RankedItemChange: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 10,
        borderRadius: 10
    }
});